// 点击登录显示显示弹窗和遮罩层
$('.login-btn').click(function(){
  $('.overlay').css({ display : 'block',});
  $('.box').css({  display : 'block',});
  $("body").parent().css("overflow-y","hidden");
  reset();
});
// 点击关闭按钮隐藏弹窗和遮罩层
$('.close-btn').click(function(){
  // overlay.style.display = 'none';
  // loginBox.style.display = 'none';
  $('.overlay').css({ display : 'none',});
  $('.box').css({  display : 'none',});
    // 显示滚动条
  // document.documentElement.style.overflow = 'auto';
  $("body").parent().css("overflow-y","auto");
});
function reset(){
    // 可视页面的尺寸
    var clientWidth = $(window).width();//可视页面的宽
    var clientHeight = $(window).height();//可视页面的高
    // 获取滚动的距离
    var scrollLeft = $(document).scrollLeft();//x轴滚动的距离
    var scrollTop = $(document).scrollTop();//y轴滚动的距离
    console.log(scrollTop);
    $('.overlay').css({  width:clientWidth+scrollLeft+"px",});
    $('.overlay').css({  height:clientWidth+scrollLeft+"px",});
    $('.box').css({  left: clientWidth/2 - $('.box').offsetWidth/2 + scrollLeft +'px',});
    $('.box').css({  top:clientHeight/2 - $('.box').offsetHeight/2 + scrollTop +'px',});
}

$(window).scroll(function() {

  reset();
});
$(window).resize(function() {

  reset();
});

// 鼠标按下开始开始移动
$('.box').mousedown(function(e){
  // 获取滚动的距离
  var scrollLeft =  $(document).scrollLeft();//x轴滚动的距离
  var scrollTop =  $(document).scrollTop();//y轴滚动的距离
  // 可视页面的尺寸
  var clientWidth = $(window).width();//可视页面的宽
  var clientHeight = $(window).height();//可视页面的高
  var width = $('.box').width();
  var height = $('.box').height();
  var offsetX = e.offsetX;
  var offsetY = e.offsetY;
  $(document).mousemove(function(ev){
    // 鼠标位置：ev.pageY = ev.clientY + scrollTop
    var left = ev.pageX - offsetX;
    var top = ev.pageY - offsetY;

    // x轴
    var minX = 0+scrollLeft;//左边
    var maxX = clientWidth-width + scrollLeft;//右边: 

    left = left<=minX ? minX : left;
    left = left>=maxX ? maxX : left;
    
    // y轴
    var minY = 0+scrollTop;//顶部:页面不滚动，最小值是scrollTop=0；当页面滚动的时候，最小值页面滚动的距离 scrollTop
    var maxY = clientHeight-height + scrollTop;//底部: 让maxY跟着scrollTop的值一点一点的变大

    top = top<=minY ? minY : top;
    top = top>=maxY ? maxY : top;

    console.log(top);

    $('.box').css({  left: left +'px',});
    $('.box').css({  top: top +'px',});
  });
});
// 鼠标松开移动取消
 $(document).mouseup(function(){
  $(document).off("mousemove");
});